<template>
  <div class="home">
    <div class="box">
      <img :src="HomeImg" alt="" class="avatar"/>
      <div class="bottom">
        <div className='text'>
          {{ userStore.username }}，{{ isMorning }}好！欢迎登录智选骑行系统
        </div>
        <div className='time'>{{ getCurrentTime() }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import useUserStore from '@/store/modules/user'
import HomeImg from '@/assets/images/home.jpg'

let userStore = useUserStore()

console.log(userStore.username)

let isMorning = ref<string>('')


onMounted(() => {
  let date = new Date()
  let currentHour = date.getHours()
  if (currentHour >= 0 && currentHour < 12) {
    // console.log('现在是上午')
    isMorning.value = '上午'
  } else if (currentHour >= 12 && currentHour < 24) {
    // console.log('现在是下午')
    isMorning.value = '下午'
  }
})

const getCurrentTime = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month: string | number = date.getMonth() + 1; // 月份是从0开始的，所以要加1
  let day: string | number = date.getDate();
  let hours: string | number = date.getHours();
  let minutes: string | number = date.getMinutes();

  // 将月、日、时、分、秒格式化为两位数
  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hours = hours < 10 ? '0' + hours : hours;
  minutes = minutes < 10 ? '0' + minutes : minutes;

  let fullDateTime = year + '年' + month + '月' + day + '日' + hours + '点' + minutes + '分'

  return fullDateTime

}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar {
      width: 20vw;
      height: 20vw;
      border-radius: 50%;
    }

    .bottom {
      margin-left: 20px;

      .title {
        font-size: 30px;
        font-weight: 900;
        margin-bottom: 30px;
      }

      .subtitle {
        font-style: italic;
        color: skyblue;
      }
    }


    .text {
      margin-top: 77px;
      font-weight: 500;
      font-size: 22px;
      color: #8C775F;
      line-height: 30px;
    }

    .time {
      margin-top: 30px;
      font-weight: 400;
      font-size: 20px;
      color: #9B9B9B;
      line-height: 28px;
    }
  }
}
</style>
